ওয়েব ডেভেলপমেন্টে ট্যাগ, এট্রিবিউট, এবং এলিমেন্টস
ওয়েব ডেভেলপমেন্টে HTML (HyperText Markup Language) একটি মৌলিক উপাদান, যা ওয়েব পেজের কাঠামো এবং উপস্থাপনাকে নির্ধারণ করে। HTML-এর প্রধান উপাদানগুলো হলো ট্যাগ (Tags), এট্রিবিউট (Attributes), এবং এলিমেন্ট (Elements)। এই তিনটি উপাদান ওয়েব পেজের বিভিন্ন কন্টেন্ট, গঠন এবং স্টাইলিং নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
ট্যাগ (Tags)
ট্যাগ হল HTML এর মৌলিক কম্পোনেন্ট, যা ওয়েব পেজের মধ্যে উপাদান বা কন্টেন্টের ধরনের পরিচয় দেয়। প্রতিটি HTML ট্যাগ সাধারণত একটি ওপেনিং ট্যাগ (opening tag) এবং ক্লোজিং ট্যাগ (closing tag) নিয়ে গঠিত। ওপেনিং ট্যাগ কন্টেন্টের শুরু এবং ক্লোজিং ট্যাগ কন্টেন্টের শেষ নির্দেশ করে।
ট্যাগগুলি সাধারণত '<' এবং '>' চিহ্নের মধ্যে থাকে। ক্লোজিং ট্যাগে '/' চিহ্ন থাকে। উদাহরণস্বরূপ:
<p>This is a paragraph.</p>
এখানে:
<p>হলো ওপেনিং ট্যাগ, যা একটি প্যারাগ্রাফ (paragraph) নির্দেশ করে।</p>হলো ক্লোজিং ট্যাগ, যা প্যারাগ্রাফের সমাপ্তি নির্দেশ করে।
ধরন:
- ওপেনিং ট্যাগ:
<tagname> - ক্লোজিং ট্যাগ:
</tagname> - এট্রিবিউটসহ ট্যাগ:
<tagname attribute="value">
এট্রিবিউট (Attributes)
এট্রিবিউট HTML ট্যাগের অতিরিক্ত বৈশিষ্ট্য যা ট্যাগের কন্টেন্ট বা আচরণ নির্ধারণ করে। এট্রিবিউটের মান সাধারণত ট্যাগের মধ্যে সরাসরি দেওয়া হয় এবং এটি সমান চিহ্ন (=) দ্বারা মানের সাথে সংযুক্ত থাকে।
এট্রিবিউট ট্যাগের পরে আসতে থাকে এবং এর মান সাধারণত কোটেশন মার্কের মধ্যে থাকে। উদাহরণস্বরূপ:
<a href="https://www.example.com">Click Here</a>
এখানে:
<a>ট্যাগ হলো লিঙ্কের জন্য।hrefহলো এট্রিবিউট, যা লিঙ্কের ঠিকানা নির্দেশ করে।"https://www.example.com"হলোhrefএর মান।
মুখ্য এট্রিবিউটের উদাহরণ:
- href: লিঙ্কের URL নির্দেশ করে (যেমন
<a>ট্যাগে)। - src: ইমেজের উৎস (যেমন
<img>ট্যাগে)। - alt: ইমেজের বর্ণনা (যেমন
<img>ট্যাগে)। - class: CSS ক্লাস অ্যাসাইন করে (যেমন
<div>ট্যাগে)। - id: এলিমেন্টকে একটি ইউনিক আইডি প্রদান করে (যেমন
<div>ট্যাগে)। - style: সরাসরি স্টাইল দেওয়া (যেমন
<p>ট্যাগে)।
এলিমেন্ট (Elements)
এলিমেন্ট হলো HTML এর সবচেয়ে গুরুত্বপূর্ণ ধারণা, যেটি ট্যাগ এবং এট্রিবিউটের সংমিশ্রণ। একে বলা হয় একটি পূর্ণ HTML উপাদান। এলিমেন্ট একটি ওপেনিং ট্যাগ, কন্টেন্ট এবং ক্লোজিং ট্যাগ নিয়ে গঠিত। এট্রিবিউটের মাধ্যমে ট্যাগের বিশেষ বৈশিষ্ট্য নির্ধারণ করা হয়।
উদাহরণস্বরূপ:
<a href="https://www.example.com" target="_blank">Visit Example</a>
এখানে:
<a>হলো ওপেনিং ট্যাগ।href="https://www.example.com"হলো এট্রিবিউট, যা লিঙ্কের URL নির্দেশ করে।target="_blank"হলো আরেকটি এট্রিবিউট, যা লিঙ্কটি নতুন ট্যাবে খুলবে।Visit Exampleহলো কন্টেন্ট, যা ব্যবহারকারী দেখতে পাবে।</a>হলো ক্লোজিং ট্যাগ।
এই ট্যাগ, এট্রিবিউট, এবং কন্টেন্টের সমন্বয়ে একটি সম্পূর্ণ এলিমেন্ট তৈরি হয়।
HTML এর বিভিন্ন ট্যাগ এবং তাদের ব্যবহারের উদাহরণ
প্যারাগ্রাফ (Paragraph)
<p>ট্যাগ ব্যবহার করে একটি প্যারাগ্রাফ তৈরি করা হয়।
<p>This is a simple paragraph.</p>হেডিং (Heading)
- হেডিং ট্যাগ
<h1>থেকে<h6>ব্যবহার করা হয়।<h1>সর্বোচ্চ গুরুত্ব এবং<h6>সর্বনিম্ন গুরুত্ব প্রদান করে।
<h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2>- হেডিং ট্যাগ
লিঙ্ক (Link)
<a>ট্যাগ ব্যবহার করে লিঙ্ক তৈরি করা হয়।
<a href="https://www.example.com">Visit Example</a>ইমেজ (Image)
<img>ট্যাগ ব্যবহার করে ওয়েব পেজে ছবি প্রদর্শন করা হয়। এখানেsrcএবংaltএট্রিবিউট ব্যবহৃত হয়।
<img src="image.jpg" alt="A description of the image">তালিকা (List)
- আনঅর্ডারড (unordered) এবং অর্ডারড (ordered) তালিকা তৈরি করার জন্য
<ul>এবং<ol>ট্যাগ ব্যবহার করা হয়।
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First Item</li> <li>Second Item</li> </ol>- আনঅর্ডারড (unordered) এবং অর্ডারড (ordered) তালিকা তৈরি করার জন্য
টেবিল (Table)
- টেবিল তৈরি করতে
<table>,<tr>,<td>ট্যাগ ব্যবহার করা হয়।
<table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>- টেবিল তৈরি করতে
সারাংশ
- ট্যাগ: HTML এর মৌলিক ইউনিট যা কন্টেন্টের গঠন এবং প্রদর্শন নির্ধারণ করে।
- এট্রিবিউট: ট্যাগের অতিরিক্ত তথ্য যা ট্যাগের আচরণ বা প্রদর্শন নিয়ন্ত্রণ করে।
- এলিমেন্ট: একটি পূর্ণ HTML উপাদান যা ওপেনিং ট্যাগ, এট্রিবিউট এবং কন্টেন্ট নিয়ে গঠিত।
এই তিনটি উপাদান একত্রে কাজ করে HTML পেজের কন্টেন্ট এবং গঠন নির্ধারণ করে। ওয়েব ডেভেলপাররা HTML, CSS এবং JavaScript এর মাধ্যমে এই উপাদানগুলি ব্যবহার করে সুন্দর এবং কার্যকরী ওয়েবসাইট তৈরি করেন।
Read more
